<template>
   <div class="after-sale-reason views-container">
      <share-link :config="shareLinkConfig" ref="sharelink">
      <template slot="title">-免单</template>
      <template slot="el-form-item">
        <el-form-item label="小程序路径" v-if="shareLinkConfig.params.qrUrl">
          <el-input style="width: 270px;" readonly placeholder="请输入内容" v-model="shareLinkConfig.params.qrUrl" class="input-with-select">
            <el-button slot="append" @click="handleClipboard(shareLinkConfig.params.qrUrl,$event)">复制</el-button>
          </el-input>
        </el-form-item>
        <el-form-item label="公众号链接" v-if="shareLinkConfig.params.linkUrl">
          <el-input style="width: 270px;" readonly placeholder="请输入内容" v-model="shareLinkConfig.params.linkUrl" class="input-with-select">
            <el-button slot="append" @click="handleClipboard(shareLinkConfig.params.linkUrl,$event)">复制</el-button>
          </el-input>
        </el-form-item>
         <el-form-item label="短链接" v-if="shareLinkConfig.params.weChat_short_url">
          <el-input style="width: 270px;" readonly placeholder="请输入内容" v-model="shareLinkConfig.params.weChat_short_url" class="input-with-select">
            <el-button slot="append" @click="handleClipboard(shareLinkConfig.params.weChat_short_url,$event)">复制</el-button>
          </el-input>
        </el-form-item>
      </template>
        </share-link>
        <div class="wlm-table">
            <div class="wlm-table-hearder-btn">
                  <router-link class="wlm-text" tag="span" :to="{path:'/application/freeofChargeAdd'}">
                        <el-button size="small" type="primary">添加活动</el-button>
                  </router-link>
                  <!-- <router-link class="wlm-text" tag="span" :to="{path:'/application/freeofChargeSet'}">
                        <el-button size="small" type="primary">分享免单设置</el-button>
                  </router-link> -->
            </div>
            <div class="wlm-table-header">
                <!-- :model="tableFormatData.blessingBag.files" -->
            <el-form :model="tableFormatData.freeofCharge.files"  size="small" label-width="85px" class="retail-form" label-position="right">
                <el-form-item label="" class="filter">
                    <el-form-item label="活动名称：">
                        <el-input @keyup.enter.native="filesSerch" v-model="tableFormatData.freeofCharge.files.title" placeholder="请输入活动名称" style="width:160px;"></el-input>
                    </el-form-item>
                    <el-form-item label="活动状态：">
                        <el-select v-model="tableFormatData.freeofCharge.files.status" placeholder="请选择">
                          <el-option
                            v-for="item in selectData"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                          </el-option>
                        </el-select>
                    </el-form-item>
                </el-form-item>
                <el-form-item label="" class="filter-btns">
                    <el-button type="primary" @click="filesSerch">筛选</el-button>
                    <el-button type="text" @click="filesEmpty">清空筛选条件</el-button>
                </el-form-item>
            </el-form>
        </div>
                 <div class="wlm-table-content">
                    <el-table  :data="tableFormatData.freeofCharge.tableData" :ref="tableFormatData.freeofCharge.key" @selection-change="handleSelectionChange" style="width: 100%" >
                        <el-table-column prop="date" label="活动名称" >
                            <template slot-scope="scope">
                              <span>{{scope.row.title}}</span>
                            </template>
                        </el-table-column>
                          <el-table-column prop="date" label="活动时间" >
                            <template slot-scope="scope">
                                <p style="white-space: nowrap;">开始时间:{{scope.row.activity_stime | parseTime('{y}-{m}-{d} {h}:{i}:{s}')}}</p>
                                <p style="white-space: nowrap;">结束时间:{{scope.row.activity_etime | parseTime('{y}-{m}-{d} {h}:{i}:{s}')}}</p>
                            </template>
                        </el-table-column>
                          <el-table-column prop="date" label="活动状态" >
                            <template slot-scope="scope">
                              <span v-if="scope.row.status==0">未开始</span>
                              <span v-if="scope.row.status==1">进行中</span>
                              <span v-if="scope.row.status==2">已结束</span>
                            </template>
                        </el-table-column>
                          <!-- <el-table-column prop="date" label="关联内容" >
                            <template slot-scope="scope">
                              <div v-for="(item,index) in scope.row.free_goods" :key="index">
                                  {{ item.is_goods==1?item.goods_name:item.title}}
                              </div>
                            </template>
                        </el-table-column> -->
                          <el-table-column prop="date" label="参与人数" >
                            <template slot-scope="scope">
                              {{scope.row.participate_num_count}}
                            </template>
                        </el-table-column>
                          <el-table-column prop="date" label="免单人数" >
                            <template slot-scope="scope">
                              {{scope.row.free_order_num_count}}
                            </template>
                        </el-table-column>
                          <el-table-column prop="date" label="操作" width="290">
                            <template slot-scope="scope">
                              <div class="operation-group">
                                 <router-link class="wlm-text" tag="span" :to="{path:'/application/freeofChargeAdd', query:{free_id:scope.row.free_id,status:scope.row.status}}">
                                        <el-button type="text">编辑</el-button>
                                </router-link>
                                 <div class="btn-line"></div>
                                <el-button class="wlm-text" type="text" @click="delbtn(scope.row.free_id)">删除</el-button>
                                 <!-- <div class="btn-line"></div>
                                   <router-link class="wlm-text" tag="span" :to="{path:'/application/freeoForder'}">
                                      <el-button class="wlm-text" type="text" >订单</el-button>
                                </router-link> -->
                                    <div class="btn-line"></div>
                                    <el-button class="wlm-text" type="text" @click="sharelink(scope.row.free_id)">推广</el-button>
                                 <div class="btn-line"></div>
                                    <router-link class="wlm-text" tag="span" :to="{path:'/application/freeoFparticipate', query:{free_id:scope.row.free_id}}">
                                         <el-button class="wlm-text" type="text" >参与详情</el-button>
                                </router-link>
                               
                              </div>
                            </template>
                        </el-table-column>
                    </el-table>
                     <div class="pagination-content flex-row flex-justify-e flex-align-c">
          <el-pagination
            :disabled="!hasTableData"
            @size-change="listPageChange"
            @current-change="listPageChange"
            :current-page.sync="tableFormatData.freeofCharge.pagination.page"
            :page-sizes="tableFormatData.freeofCharge.pagination.pagesizes"
            :page-size.sync="tableFormatData.freeofCharge.pagination.list_rows"
            layout="total, sizes, prev, pager, next, jumper"
            :total="hasTableData?tableFormatData.freeofCharge.pagination.total : 0"
          >
          </el-pagination>
        </div>
                 </div>
        </div>
   </div>
</template>
<script>
import { getFreeList,delFree,freeSpread } from "@/api/freeofcharge";
import ShareLink from '@/components/ShareLink/index'
import clipboard from '@/utils/clipboard'
import mixins from '@/mixins/mixins'
export default {
  mixins: [mixins.getters('Table')],
     name:'freeofCharge',
      components:{
        ShareLink
      },
  data () {
    return {
      shareLinkConfig: {
                current: 'weChatQr',
                params: {
                    weChat_short_url:'',
                    qrUrl: '',
                    linkUrl: '',
                    weChatQr: '',
                    appQr: ''
                }
            },
      selectData:[
        {
         value: '1',
          label: '进行中'
      },
       {
         value: '0',
          label: '未开始'
      },
       {
         value: '2',
          label: '已结束'
      },
      ],
      tableFormatData: {
                current: 'freeofCharge',
                freeofCharge: {
                key: 'freeofCharge',
                api: {
                    getList: getFreeList,
                    // delList: delFree
                },
                tableData: [],
                files: {
                    ids: [],
                    checkall: '0',
                    Recycle: '1',
                },
                 rowId: 'free_id',
                pagination: {
                    page: 1,
                    list_rows: 10,
                    pagesizes: [10, 20, 50],
                    total: 0
                }
                }
            }
    }
  },
  methods: {
    //   推广
         sharelink(free_id) {
            freeSpread({ free_id }).then((response) => {
                const { data: { data: { weChat_qrcode, wxApp_qrcode, weChat_url, wxApp_url, url,weChat_short_url } } } = response
                this.shareLinkConfig.params.qrUrl = wxApp_url
                this.shareLinkConfig.params.linkUrl = weChat_url
                this.shareLinkConfig.params.weChatQr = weChat_qrcode
                this.shareLinkConfig.params.appQr = wxApp_qrcode
                this.shareLinkConfig.params.url = url
                this.shareLinkConfig.params.weChat_short_url = weChat_short_url
                this.shareLinkConfig.current = weChat_qrcode ? 'weChatQr' : weChat_qrcode ? 'appQr' : ''
            })
            this.$refs.sharelink.toggle()
            },
            handleClipboard(text, event) {
                clipboard(text, event)
                },
    delbtn(id){
              this.$confirm('此操作将永久删除该活动, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                     delFree({free_id:id}).then(res=>{
                         if(res.data.code==1){
                             this.$message.success(res.data.msg)
                             this.filesSerch()
                         }
             })
                }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
                });
            
         },
  }
}
</script>